<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../../resource/openLayers/css/ol.css"
          th:href="@{/resource/openLayers/css/ol.css}"/>

    <script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
    <script src="../../resource/openLayers/js/ol.js" th:src="@{/resource/openLayers/js/ol.js}"></script>
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .map {
            width: 100%;
            height: 100%;
            background: #f6f6f4;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 300px;
            border-radius: 10px;
            /*这个属性设置使填充进度条时的图形为圆角*/
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        input[type=range]::-webkit-slider-runnable-track {
            height: 15px;
            border-radius: 10px;
            /*将轨道设为圆角的*/
            box-shadow: 0 1px 1px #65bdd3, inset 0 .125em .125em #127f9b;
            /*轨道内置阴影效果*/
        }

        input[type=range]:focus {
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 25px;
            width: 25px;
            margin-top: -5px;
            /*使滑块超出轨道部分的偏移量相等*/
            background: #08c1e6;
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 0.125em rgba(49, 155, 187, 0.5);
            /*设置边框*/
            box-shadow: 0 .125em .125em #08c1e6;
            /*添加底部阴影*/
        }
    </style>
</head>

<body>
<input type="button" id="tempstop" value="暂停" />
<input type="button" id="start" value="开始" />
<input type="button" id="stop" value="停止" />
<input type="button" id="next" value="前进" />
<input type="button" id="prev" value="后退" />
<input type="range" id="sudu" value="800" max="2000" min="100" step="100" />
<div id="map" class="map" data-id="11"></div>
</body>

</html>
<script type="text/javascript">
    var points = [
        [120.27194738388057, 36.3357839481728]
        , [120.27194738388057, 36.33528166973691]
        , [120.27194738388057, 36.33528266973691]
        , [120.2717328071594, 36.33459124591144]
        , [120.27145385742186, 36.333882530121315]
        , [120.270938873291, 36.33315652189482]
        , [120.27091741561887, 36.332741657013344]
        , [120.2705955505371, 36.33213664176766]
        , [120.27070283889768, 36.33139333089085]
        , [120.27057409286496, 36.33087473770719]
        , [120.27108907699584, 36.33006226811251]
        , [120.27177572250363, 36.32987211443067]
        , [120.27271986007688, 36.329664673521194]
        , [120.27357816696164, 36.32918064258463]
        , [120.27342796325681, 36.32826443293632]
        , [120.27364253997803, 36.32753837235599]
        , [120.27447938919066, 36.327088902892015]
        , [120.2756381034851, 36.326795017609925]
        , [120.27731180191037, 36.32632825635429]
        , [120.27881383895873, 36.32601708063062]
        , [120.28033733367917, 36.32572319130615]
        , [120.28138875961302, 36.32570590366433]
        , [120.2832770347595, 36.32555031471519]
        , [120.28469324111937, 36.32555031471519]
        , [120.28591632843013, 36.32548116397142]
        , [120.2876543998718, 36.325412013166286]
        , [120.2888774871826, 36.325412013166286]
        , [120.29087305068967, 36.3253774377407]
        , [120.29175281524657, 36.32485880451607]
        , [120.29284715652466, 36.3245649108233]
    ]

    var newPoints = []

    function DealPoints() {
        $.each(points, function (i, item) {
            var currLng = parseFloat(item[0]);
            var currLat = parseFloat(item[1]);

            newPoints.push(ol.proj.fromLonLat([currLng, currLat]));

            if ((i + 1) == points.length) {
                return false;
            }

            var nextLng = parseFloat(points[i + 1][0]);
            var nextLat = parseFloat(points[i + 1][1]);

            var diffLng = nextLng - currLng;
            var diffLat = nextLat - currLat;

            var currParamsLng = 0
            var currParamsLat = 0
            //控制速度  标准 0.0001
            var base = 0.000005;

            currParamsLng = Math.sqrt(base * base / (1 + (diffLat / diffLng) * (diffLat / diffLng)));
            currParamsLat = (diffLat / diffLng) * currParamsLng

            currParamsLng = Math.abs(currParamsLng);
            currParamsLat = Math.abs(currParamsLat);

            if (diffLng == 0) {
                currParamsLng = 0;
                currParamsLat = base;
            }

            if (diffLat == 0) {
                currParamsLng = base;
                currParamsLat = 0;
            }

            //当经度差维度差都等于0 ：则视为同一个点 不处理
            if (diffLng == 0 && diffLat == 0) {

            }
            //当精度等于0维度不等于0：判断
            else if (diffLng == 0) {
                if (diffLat < 0) {
                    currLat = currLat - currParamsLat;
                    while (currLat > nextLat) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLat = currLat - currParamsLat;
                    }
                }
                else {
                    currLat = currLat + currParamsLat;
                    while (currLat < nextLat) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLat = currLat + currParamsLat;
                    }
                }
            }
            else if (diffLat == 0) {
                if (diffLng < 0) {
                    currLng = currLng - currParamsLng;
                    while (currLng > nextLng) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLng = currLng - currParamsLng;
                    }
                }
                else {
                    currLng = currLng + currParamsLng;
                    while (currLng < nextLng) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLng = currLng + currParamsLng;
                    }
                }
            }
            else {
                if (diffLng > 0 && diffLat > 0) {
                    currLng = currLng + currParamsLng;
                    currLat = currLat + currParamsLat;
                    while (currLng < nextLng) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLng = currLng + currParamsLng;
                        currLat = currLat + currParamsLat;
                    }
                }
                else if (diffLng > 0 && diffLat < 0) {
                    currLng = currLng + currParamsLng;
                    currLat = currLat - currParamsLat;
                    while (currLng < nextLng) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLng = currLng + currParamsLng;
                        currLat = currLat - currParamsLat;
                    }
                }
                else if (diffLng < 0 && diffLat < 0) {
                    currLng = currLng - currParamsLng;
                    currLat = currLat - currParamsLat;
                    while (currLng > nextLng) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLng = currLng - currParamsLng;
                        currLat = currLat - currParamsLat;
                    }
                }
                else if (diffLng < 0 && diffLat > 0) {
                    currLng = currLng - currParamsLng;
                    currLat = currLat + currParamsLat;
                    while (currLng > nextLng) {

                        newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                        currLng = currLng - currParamsLng;
                        currLat = currLat + currParamsLat;
                    }
                }
            }
        })
    }

    DealPoints();

    var map;

    //轨迹
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 2
            })
        })
    });

    //动画
    var speed;
    //点标记
    var geoMarker
    var endMarker

    //样式
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            snapToPixel: false,
            fill: new ol.style.Fill({ color: 'rgba(30,144,255,1)' }),
            stroke: new ol.style.Stroke({
                color: 'rgb(30,144,255)', width: 2
            })
        })
    });


    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });

    //地图初始化
    function InitMap() {
        map = new ol.Map({
            layers: [new ol.layer.Vector({
                source: new ol.source.Vector()
            }),layer, vectorLayer],
        target: 'map',
            view: new ol.View({
            center: ol.proj.fromLonLat([120.277, 36.330]),
            minZoom: 1,
            zoom: 16
        })
    });
    }

    /*显示并编辑区域**********************************************************************************/
    function AddPolygon() {
        layer.getSource().clear();

        //var line = new ol.geom.LineString(points);
        var line = new ol.geom.LineString(newPoints);

        var feature = new ol.Feature({
            geometry: line
        });

        layer.getSource().addFeature(feature);

        SetMoveMark();
    }

    function SetMoveMark() {
        geoMarker = new ol.Feature({
            geometry: new ol.geom.Point(newPoints[0])
        });
        geoMarker.setStyle(style)

        endMarker = new ol.Feature({
            geometry: new ol.geom.Point(newPoints[newPoints.length - 1])
        });
        endMarker.setStyle(style);

        vectorLayer.getSource().addFeatures([geoMarker, endMarker]);
    }

    InitMap();

    AddPolygon();

    //动画
    var index = 0;
    var date;
    var tempDate;
    var center = ol.proj.fromLonLat([120.277, 36.330]);
    var calcIndex = 0;

    var moveFeature = function (event) {
        var vectorContext = event.vectorContext;

        var frameState = event.frameState;
        var elapsedTime = frameState.time - date;

        if (ispuse == 0) {
            index = Math.round(speed * elapsedTime / 1000) + calcIndex;
            console.log(calcIndex)
        }

        if (index >= newPoints.length) {
            stopAnimation();
            clearInterval(inter);
            return;
        }

        var currentPoint = new ol.geom.Point(newPoints[index]);
        var feature = new ol.Feature(currentPoint);
        vectorContext.drawFeature(feature, style);

        if (ispuse == 0) {
            map.render();
        }
    };



    function startAnimation() {
        //now = new Date().getTime();
        //speed = 20000 / $("#sudu").val();
        speed = $("#sudu").val();

        geoMarker.setStyle(style);
        map.on('postcompose', moveFeature);
        map.render();
    }


    /**
     * @param {boolean} ended end of animation.
     */
    function stopAnimation() {
        index = 0;
        date = 0;
        tempDate = 0;
        (geoMarker.getGeometry()).setCoordinates(newPoints[0]);
        map.un('postcompose', moveFeature);
    }

    var inter;
    var ispuse = 0;

    $("#tempstop").click(function () {
        //stopAnimation();
        map.render();
        clearInterval(inter);
        tempDate = (new Date()).getTime();
        ispuse = 1;
    })


    $("#start").click(function () {
        if (date == undefined || date == 0) {
            date = (new Date()).getTime();
            calcIndex = 0;
        }

        if (tempDate != undefined && tempDate != 0) {
            date = date + ((new Date()).getTime() - tempDate);
        }

        ispuse = 0;
        startAnimation();
        startMove();
    })

    function startMove() {
        inter = setInterval(function () {
            map.render();
        }, speed);
    }

    $("#stop").click(function () {
        stopAnimation();
        clearInterval(inter);
        calcIndex = 0;
    })

    $("#next").click(function () {
        var tempIndex = index;

        var ispoint = true;
        while (ispoint) {
            var p = newPoints[tempIndex];

            for (i = 0; i < points.length; i++) {
                var p1 = ol.proj.fromLonLat(points[i]);

                if (p[0] == p1[0] && p[1] == p1[1]) {
                    ispoint = false;
                    break;
                }
            }

            tempIndex = tempIndex + 1;

            if (tempIndex >= newPoints.length) {
                ispoint = false;
            }
        }

        calcIndex = tempIndex - index + calcIndex;
        index = tempIndex;
        map.render();
    })

    $("#prev").click(function () {
        var tempIndex = index;

        var ispoint = true;
        while (ispoint) {
            var p = newPoints[tempIndex];

            for (i = 0; i < points.length; i++) {
                var p1 = ol.proj.fromLonLat(points[i]);

                if (p[0] == p1[0] && p[1] == p1[1]) {
                    ispoint = false;
                    break;
                }
            }

            tempIndex = tempIndex - 1;

            if (tempIndex == 0) {
                ispoint = false;
            }
        }

        calcIndex = tempIndex - index + calcIndex;
        index = tempIndex;
        map.render();
    })

</script>